<template>
	<view class="content pageBg" @scroll="handleScroll">
		<view :style="{height: getNavBarHeight()+'px'}"></view>
		<view class="header">
			<view class="top">
				<view class="revenue">
					<view class="title">本月收入</view>
					<view class="num">111.11</view>
				</view>
				<view class="expenditures">
					<view class="title">本月结余</view>
					<view class="num">111.11</view>
				</view>
				<view class="budget">
					<view class="title">剩余预算</view>
					<view class="num">111.11</view>
				</view>
			</view>
			<view class="bottom">
				<view class="title">本月支出</view>
				<view class="expenditures">111.11</view>
			</view>
		</view>
		<view class="dayDetails" v-for="item in 3">
			<view class="top">
				<view class="left">
					<text style="margin:0 20rpx 0 10rpx;font-size: 30rpx; color: black;">今天</text>
					<text>周三</text>
				</view>
				<view class="right">
					收入:<text style="color: #f1595f; margin-right: 20rpx;">11.11</text>
					支出:<text style="color: #42b095; margin-right: 20rpx;">11.11</text>
				</view>
			</view>
			<view class="DetailList">
				<view class="item" v-for="item in 5" @click="navigatorTo()">
					<view class="left">
						<view>
							<uni-icons type="calendar" size="25" color="#42b095"></uni-icons>
						</view>
						<view style="margin-left: 20rpx;">
							<view style="font-weight: 700; font-size: 28rpx;">食品餐饮-午餐</view>
							<view style="color: #656565; font-size: 24rpx;">12:01</view>
						</view>

					</view>
					<view class="right">
						<text style="color: #42b095; margin-right: 20rpx; font-weight: 700;">-11.11</text>
					</view>
				</view>
			</view>
		</view>
		<view v-if="fabVisible">
			<uni-fab :pattern="pattern" horizontal="right" :content="content" :vertical="vertical" direction="vertical"
				@trigger="trigger" @fabClick="fabClick"></uni-fab>
		</view>
		<addPopupVue ref="popup" :dataList="dataList"></addPopupVue>
	</view>
</template>

<script setup>
	import { getNavBarHeight } from '@/utils/system.js'
	import { reactive, ref } from "vue"
	import addPopupVue from '../../components/addPopup/addPopup.vue';
	import { onPageScroll } from '@dcloudio/uni-app'
	const current = ref(0)
	const popup = ref(null)
	// uni-fab
	const fabVisible = ref(true)
	//监听页面的滚动显示fab
	onPageScroll((e) => {
		if (e.scrollTop > 200) {
			fabVisible.value = false
		} else {
			fabVisible.value = true
		}
	})
	//跳转详情

	const navigatorTo = () => {
		uni.navigateTo({
			url: '/pages/add/add'
		})
	}
	const pattern = reactive({
		color: "#7A7E83",
		backgroundColor: "#fff",
		buttonColor: "#3fa98d"
	})
	const dataList = ref()
	const content = reactive([{
			iconPath: '../../static/shouru.png',
			text: '收入',
			active: false
		},
		{
			iconPath: "../../static/zhichu.png",
			text: '支出',
			active: false
		},
		{
			iconPath: "../../static/zhaiquanzhaiwu.png",
			text: '债务',
			active: false
		}
	])
	const trigger = (e) => {

		console.log('e----', e)
		if (e.index == 0) {
			console.log(e.index)
			dataList.vlaue = [
				{ icon: 'contact', title: "购物消费" },
				{ icon: 'contact', title: "食品餐饮" },
				{ icon: 'contact', title: "出行交通" },
				{ icon: 'contact', title: "休闲娱乐" },
				{ icon: 'contact', title: "居家生活" },
				{ icon: 'contact', title: "文化教育" },
				{ icon: 'contact', title: "送礼人情" },
				{ icon: 'contact', title: "健康医疗" },
				{ icon: 'contact', title: "其他" },
			]
		} else if (e.index == 1) {
			dataList.vlaue = [
				{ icon: 'contact', title: "中奖" },
				{ icon: 'contact', title: "理财盈利" },
				{ icon: 'contact', title: "礼金人情" },
				{ icon: 'contact', title: "借入" },
				{ icon: 'contact', title: "奖金" },
				{ icon: 'contact', title: "兼职外快" },
				{ icon: 'contact', title: "工资" },
				{ icon: 'contact', title: "二手闲置" },
				{ icon: 'contact', title: "补贴" },
				{ icon: 'contact', title: "报销" },
				{ icon: 'contact', title: "补贴" },
				{ icon: 'contact', title: "报销" },
				{ icon: 'contact', title: "其他" },
			]
		} else if (e.index == 2) {
			dataList.vlaue = [
				{ icon: 'contact', title: "支付宝" },
				{ icon: 'contact', title: "微信" },
				{ icon: 'contact', title: "京东" },
				{ icon: 'contact', title: "美团" },
				{ icon: 'contact', title: "抖音" },
				{ icon: 'contact', title: "饿了么" },
				{ icon: 'contact', title: "其他" },
			]
		}
		popup.value.openpopup(dataList.vlaue, e.index)
	}
	//取消按钮
	const oncancel = () => {
		addpopup.value.close()
	}
	const movehandle = () => {
		return false
	}
</script>

<style lang="scss" scoped>
	.active {
		background-color: #3fa98d;
		color: #fff;
	}

	.content {
		padding: 30rpx;

		.header {
			padding: 30rpx;
			border-radius: 20rpx;
			background: #d8ede6;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			// align-items: center;
			color: #838b8e;
			font-weight: 700;

			.top {
				height: 100rpx;
				display: flex;
				justify-content: space-between;
				font-size: 26rpx;

				.num {
					font-size: 35rpx;
					margin-top: 10rpx;
					color: #6b676d;
				}
			}

			.bottom {
				padding-top: 20rpx;

				.expenditures {
					font-weight: 1000;
					font-size: 50rpx;
					margin-top: 10rpx;
					color: #3fa98d;
				}
			}
		}

		.addRecording {
			margin: 30rpx 0;

			button {
				display: flex;
				justify-content: center;
				align-items: center;
				letter-spacing: 3rpx;
				font-size: 30rpx;
				font-weight: 700;
				background-color: #47ab93;
				color: #fff;

				.icon {
					margin-right: 20rpx;
				}
			}

			button:after {
				border: none;
			}
		}

		.dayDetails {
			padding-top: 30rpx;

			// background-color: ;
			.top {
				font-weight: 700;
				color: #656565;
				font-size: 28rpx;
				display: flex;
				justify-content: space-between;
			}

			.DetailList {
				margin-top: 3rpx;
				border-radius: 20rpx;

				// height: 800rpx;
				padding: 30rpx;
				background: #fff;

				.item {
					padding: 20rpx 0;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.left {
						display: flex;
						align-items: center;
					}
				}
			}
		}

		.add {
			width: 110rpx;
			height: 110rpx;
			background-color: #47ab93;
			position: fixed;
			bottom: 100rpx;
			right: 50rpx;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
		}

	}
</style>